<template>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<image class="top_box_left" src="/static/30.png" mode="" @click="$fh"></image>
				<view class="top_box_title">申请入驻</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
		</view>
		<view class="top_img">
			<image class="top_img" src="/static/75.png" mode=""></image>
			<view class="top_title">
				<image class="top_title_img" src="/static/76.png" mode=""></image>
				你的房子值得被更多旅行者珍藏
			</view>
		</view>

		<view class="con">
			<view class="title">填写入住信息</view>
			<view class="box">
				<view class="box_left">
					<image class="box_left_img" src="/static/78.png" mode=""></image>
					上传头像
				</view>
				<button
					class="box_right"
					open-type="chooseAvatar"
					@chooseavatar="onChooseAvatar"
					style="justify-content: flex-end">
					<image class="box_right_img" src="/static/77.png" mode="" v-if="!avatarUrl"></image>
					<image class="box_right_img" :src="avatarUrl" mode="" v-else></image>
					<image class="box_right_img_zw" src="/static/28.png" mode=""></image>
				</button>
			</view>
			<view class="box">
				<view class="box_left">
					<image class="box_left_img" src="/static/79.png" mode=""></image>
				</view>
				<input class="box_right" type="text" placeholder="输入真实姓名..." v-model="name"/>
			</view>
			<view class="box">
				<view class="box_left">
					<image class="box_left_img" src="/static/80.png" mode=""></image>
				</view>
				<view class="box_right">
					<input type="text" placeholder="输入手机号码..." v-model="phone"/>
				</view>
			</view>
			<view class="box">
				<view class="box_left">
					<image class="box_left_img" src="/static/61.png" mode=""></image>
				</view>
				<view class="box_right">
					<input type="text" placeholder="输入身份证号码..." v-model="idcard"/>
				</view>
			</view>

			<view class="rules">
				<view class="rules_title">
					<view class="rules_title_zw"></view>
					入驻规则
				</view>
				<view class="rules_text">身份证 要求在有效期内且剩余有效期在90天以上信息评审及背景筛查全部通过</view>
			</view> 
		</view>
		<view class="btn">
			<view class="btn_nr" @click="submit">确认填写并提交审核</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	const validateFields = inject('$validateFields')
	let list = ref([])
	let avatarUrl = ref('')
	let name = ref('')
	let phone = ref('')
	let idcard = ref('')
	const submit = async () => {
		if (
			validateFields([
				{
					value: avatarUrl.value,
					message: '请上传您的头像'
				},
				{
					value: name.value,
					message: '请输入您的真实姓名'
				},
				{
					value: phone.value,
					message: '请输入您的手机号码'
				},
				{
					value: phone.value.length == 11,
					message: '手机号码错误'
				},
				{
					value: idcard.value,
					message: '请输入您的身份证号码'
				},
				{
					value: idcard.value.length == 18,
					message: '身份证号码错误'
				}
			])
		) {
			return
		}

		http
			.post('/srapi/keyuan/shenqingtj', {
				photo: avatarUrl.value,
				name: name.value,
				idcard: idcard.value,
				phone: phone.value
			})
			.then((res) => {
				console.log('返回值', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages_B/audit/audit?status=1'
					})
				}, 500)
			})
	}

	const onChooseAvatar = (file) => {
		console.log('file', file)
		http.upload(file.detail.avatarUrl).then((res) => {
			console.log('res', res)
			avatarUrl.value = res.file_path
		})
	}
	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
	})
	// 触底
	onReachBottom(() => {
		// if (listtype.value) {
		// page.value += 1
		// indexlist()
		// }
	})
</script>

<style lang="less" scoped>
	.top {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			margin-bottom: 30rpx;
			.top_box_left {
				position: relative;
				z-index: 2;
				width: 17rpx;
				height: 30rpx;
				padding: 15rpx 30rpx 15rpx 0;
			}

			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}
	.top_img {
		width: 750rpx;
		height: 360rpx;
		position: relative;
		.top_title {
			box-sizing: border-box;
			width: 750rpx;
			height: 120rpx;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 10;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			padding: 15rpx 30rpx;
			.top_title_img {
				width: 69rpx;
				height: 82rpx;
				margin-right: 30rpx;
			}
		}
	}

	.con {
		padding: 30rpx;
		.title {
			font-size: 32rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 30rpx;
		}
	}

	.box {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
		.box_left {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
			display: flex;
			align-items: center;
			.box_left_img {
				width: 34rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}
		}

		.box_right {
			flex: 1;
			display: flex;

			align-items: center;
			text-align: left;
			background-color: #fff;
			.box_right_img {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
			.box_right_img_zw {
				width: 9rpx;
				height: 16rpx;
				margin-left: 25rpx;
			}
		}
	}

	.rules {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		.rules_title {
			font-size: 28rpx;
			font-weight: 700;
			color: #000000;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.rules_title_zw {
				width: 8rpx;
				height: 28rpx;
				background: #007bee;
				border-radius: 4rpx;
				margin-left: 28rpx;
			}
		}
		.rules_text {
			padding-left: 36rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #787878;
			line-height: 36rpx;
		}
	}

	.btn {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		border-radius: 12rpx;
		padding: 15rpx 30rpx;
		padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
		.btn_nr {
			width: 690rpx;
			height: 84rpx;
			background: #3475f3;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 84rpx;
		}
	}
	//
</style>